<template>
  <div class="user-query">
    <div class="title">查看成员资料</div>
    <div class="box-info">
      <Form class="work-info" :model="searchInfo" :label-width="10">
        <FormItem class="item-title" ><span>查询: </span></FormItem>
        <FormItem class="item-info" >
          <Select v-model="searchInfo.group">
            <Option v-for="item in groupList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <Button type="default" class="cancle-button" name="button" @click.stop="orgSearch" >按组查询</Button>
        <FormItem  class="item-member">
          <Input placeholder="人员姓名" v-model="searchInfo.member"></Input>
        </FormItem>
        <Button type="default" class="cancle-button"  name="button" @click.stop="memberSearch">按人员查询</Button>
      </Form>
      
      <div id="member-base" class="base" v-if="curMemberList.length">
        <div class="photo" v-for="item in curMemberList" @click="showInfo(item)" :key="item.id">
          <img :src="item.pictureUrl" alt="用户头像" />
          <span class="name">{{item.realname}}</span>
        </div>
      </div>
      
      <span class="none-base" v-else>
        <span class="none-member">当前没有可查看的成员资料</span>
      </span>
                
      <Modal v-model="checkInfo" width="800">
        <p slot="header">
          <span>成员资料</span>
        </p>
        <Form :model="baseInfo" class="others-info" :label-width="80">
          <div class="others-part">
            <FormItem label="姓名:">
              <span class="no-change">{{baseInfo.realname}}</span>
            </FormItem>
            <FormItem label="性别: ">
              <span class="no-change">{{baseInfo.sex}}</span>
            </FormItem>
            <FormItem label="年龄: ">
              <span class="no-change">{{baseInfo.age}}</span>
            </FormItem>
            <FormItem label="出生日期: ">
              <span class="no-change">{{baseInfo.birthday}}</span>
            </FormItem>
            <FormItem label="电话:">
              <span class="no-change">{{baseInfo.telephone}}</span>
            </FormItem>
            <FormItem label="邮箱:">
              <span class="no-change">{{baseInfo.email}}</span>
            </FormItem>
            <FormItem label="微信:">
              <span class="no-change">{{baseInfo.wechat}}</span>
            </FormItem>
            <FormItem label="毕业院校:">
              <span class="no-change">{{baseInfo.school}}</span>
            </FormItem>
          </div>
          <div class="others-part">
            <FormItem label="入职时间:">
              <span class="no-change">{{baseInfo.entrytime}}</span>
            </FormItem>
            <FormItem label="所在组:">
              <span class="no-change">{{baseInfo.org}}</span>
            </FormItem>
            <FormItem label="在职状态:">
              <span class="no-change">{{baseInfo.status}}</span>
            </FormItem>
            <FormItem label="签名:">
              <span class="no-change">{{baseInfo.sign}}</span>
            </FormItem>
            <FormItem label="生活主页:">
              <span class="no-change">{{baseInfo.home}}</span>
            </FormItem>
            <FormItem label="技术分享:">
              <span class="no-change">{{baseInfo.share}}</span>
            </FormItem>
            <FormItem label="工作内容:">
              <span class="no-change">{{baseInfo.content}}</span>
            </FormItem>
          </div>
        </Form>
        <div slot="footer">
        </div>
      </Modal>
    </div>
    <div v-if="pages > 1 && allMemberList.length" class="page-set" >
      <span :class="[curPage === 1 ? 'disabled' : '']" @click.stop="curPage === 1 ? null : setCurList(1)">首页</span>
      &nbsp;&nbsp;
      <span :class="[curPage === 1 ? 'disabled' : '']" @click.stop="curPage === 1 ? null : setCurList('-1')"> 
        <Icon type="ios-arrow-left"></Icon> 
      </span>  
        &nbsp;&nbsp;
        {{curPage}}/{{pages}} 
        &nbsp;&nbsp;
      <span :class="[curPage === pages ? 'disabled' : '']" @click.stop="curPage === pages ? null : setCurList('+1')"> 
        <Icon type="ios-arrow-right"></Icon> 
      </span> 
      &nbsp;&nbsp;
      <span :class="[curPage === pages ? 'disabled' : '']" @click.stop="curPage === pages ? null : setCurList(0)">尾页</span>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from 'vuex'
import throttle from 'lodash/throttle'
export default {
  data() {
    return {
      baseInfo: {
        realname: '',
        sex: '',
        age: '',
        birthday: '',
        telephone: '',
        email: '',
        wechat: '',
        entrytime: '',
        org: '',
        status: '',
        home: '',
        share: '',
        content: '',
        school:'',
        sign:''
      },
      searchInfo: {
        group: '',
        member: ''
      },
      checkInfo: false,
      curMemberList: [],
      curPage: 0,
      pages: 0,
      pageOrder: 18
    }
  },
  computed: {
    ...mapState({
      userID: ({user}) => user.userID,
      orgID:  ({user}) => user.orgID,
      groupList: ({user}) => user.groupList,
      allMemberList: ({user}) => user.allMemberList
    })
  },
  created() {
    this.orgList()
  },
  mounted() {
    this.loadsetItemNum = throttle(this.setItemNum, 10000)
    const _this = this
    window.onresize = () => {
      return (() => {
        _this.loadsetItemNum()
      })()
    }
  },
  watch:{
    curPage() {
      this.loadsetItemNum()
      this.setCurList(this.curPage)
    }
  },
  methods: {
    ...mapMutations(['CHANGE_ORG_ID']),
    ...mapActions(['getUserInfo', 'getOrgList', 'getOrgUsers', 'getMemberList']),
    showInfo(item) { // 查看人员具体信息
      this.getUserInfo({type: 'get', id: item.id}).then((suc) => {
        this.baseInfo = suc.data
        this.checkInfo = true
      }).catch((err) => {
        this.checkInfo = false
        this.$Notice.error({title:'失败', desc: '获取失败!'})
      })
    },
    setCurList(t) { // -1 左翻页 +1 右翻页 1 首页 0 尾页
      if(t === 1) this.curPage = 1
      if(t === 0) this.curPage = this.pages
      if(t === '+1') {
        this.curPage += 1
      }
      if(t === '-1'){
        this.curPage -= 1
      }
      const v = this.allMemberList.length % this.pageOrder? 1: 0
      this.pages = parseInt(this.allMemberList.length / this.pageOrder) + parseInt(v)
      this.curMemberList = this.allMemberList.slice((this.curPage-1)*this.pageOrder, (this.curPage-1)*this.pageOrder + this.pageOrder)
    },
    setItemNum() {
      const obj = [this.$el.querySelector('#member-base')][0]
      const width = obj ? obj.offsetWidth : 1585
      const height = obj ? obj.offsetHeight : 660
      const x = parseInt(parseInt(width) / 260)
      const y = parseInt(parseInt(height) / 220)
      this.pageOrder = parseInt(x) * parseInt(y)
      this.setCurList(this.curPage)
    },
    orgList() {
      this.getOrgList(this.userID).then((suc) => { // 获取当前所在组 所有可查看的组
        if(!suc) {
          this.$Notice.error({title:'失败', desc: '获取失败!'})
          return
        }
        this.searchInfo.group = suc.data.userOrgId
        return this.getOrgUsers(suc.data.userOrgId) // 获取当前组的所有成员
      }).then((res) => {
        this.curPage = 1
        this.loadsetItemNum()
      }).catch((err) => {
        console.log(err)
        this.curMemberList = []
        this.$Notice.error({title:'失败', desc: '获取失败!'})
      })
    },
    orgSearch() { // 按组查询
      this.getOrgUsers(this.searchInfo.group).then((suc) => {
        this.curPage = 1
        this.loadsetItemNum()
      }).catch(() => {
        this.curMemberList = []
        this.$Notice.error({title:'失败', desc: '查询失败!'})
      })
    },
    memberSearch() { // 按人员模糊查询
      this.getMemberList(this.searchInfo.member).then((suc) => {
        this.curPage = 1
        this.loadsetItemNum()
      }).catch((err) => {
        this.curMemberList = []
        this.$Notice.error({title:'失败', desc: '查询失败!'})
      })
    }
  },
  beforeDestroy() {
    window.onresize = null
  }
}
</script>

<style lang="less" scoped>
.user-query {
  width: 100%;
  height: 100%;//~'calc(100% - 24px)';
  .title {
    font-weight: 500;
    height: 60px;
    line-height: 40px;
    font-size: 20px;
    padding: 20px 0 0 20px;
    border-bottom: 1px solid #ccc
  }
}

.box-info {
  width: 100%;
  height: ~'calc(100% - 115px)';
}

.none-base {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-self: center;
}

.none-base {
  .none-member {
    text-align: center;
    font-size: 72px;
    color: #ccc;
    display: flex;
    align-self: center
  }
}

.base {
  width: 100%;
  overflow-y: auto;
  height: ~'calc(100% - 50px)';
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items:flex-start;
  align-content:flex-start;
  .photo {
    margin: 45px 50px 0 60px;
    img {
      width: 150px;
      height: 150px;
      background-color: #aaa
    }
  }
  .name {
    display: block;
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding-top: 10px;
  }
}
.v-transfer-dom {
  position: relative;
  z-index: 99999;
}

.ivu-form-item {
  margin-bottom: 15px;
}
.work-info {
  width: 60%;
  min-width:1000px;
  margin-top: 20px;
  .item-info,
  .item-title,
  .item-member {
    float:left;
  }
  .item-member {
    margin-left:70px;
  }
  .item-info,
  .item-member {
    width:200px;
  }
  .item-title {
    width:60px;
    margin-left:70px;
    margin-right:30px;
    span {
      font-weight: 500;
      font-size:16px
    }
  }
}

.cancle-button {
  margin-left:30px;
  float: left;
  margin-top:3px;
}

.no-change {
  display: inline-block;
  width: 100%;
  height: 32px;
  line-height: 21px;
  padding: 4px 10px;
  font-size: 12px;
  border: 1px solid #dddee1;
  border-radius: 4px;
  color: #495060;
  background-image: none;
  position: relative;
  cursor: text;
  overflow:hidden;
  text-overflow:ellipsis; 
  white-space: nowrap;
}

.others-info {
  display: flex;
  .others-part {
    width: 50%;
    padding-right:20px;
  }
}
.page-set {
  text-align: center;
  font-size: 14px;
  span {
    cursor: pointer;
    .ivu-icon {
      font-size: 16px
    }
    &.disabled {
      color:#ccc;
    }
  }
}
</style>
